<template>
	<div>
		<transition name="fade">
	        <div class="mask" v-show="!!activeClass" @click="activeClass = (!!activeClass ? '' : 'active')"></div>
	    </transition>

	    <div class="layout-trigger-menu" :class="activeClass" @click="activeClass = (!!activeClass ? '' : 'active')">
	        <transition name="fade">
	          <i v-if="!!!activeClass" class="iconfont icon-menu" key="iconmenu"></i>
	          <i v-else="!!activeClass" class="iconfont icon-close" key="iconclose"></i>
	        </transition>
	    </div>
		
	    <div class="layout-main-menu" :class="activeClass" >
	        <div class="circle">
	            <bar-item path="/" label="首页"></bar-item>
	            <bar-item path="/list" label="产品"></bar-item>
	            <bar-item path="/news" label="新闻"></bar-item>
	            <bar-item path="/me" label="关于"></bar-item>
	            <bar-item path="/me" label="联系"></bar-item>
	        </div>
	    </div>
    </div>
</template>


<script>
import BarItem from './BarItem.vue'

	export default {
	    data () {
	        return {
	            activeClass:''
	        }
	    },
	    components:{
	    	BarItem
	    },
		beforeRouteEnter:function(to, from, next){
			console.log(to)
			next();
		}
	}
</script>


<style lang="less">
	
.layout-trigger-menu{position: fixed;bottom: 70px;right: 10px;border-radius: 100%;width: 50px;height: 50px;overflow: visible;z-index: 12;background: #fff;box-shadow: 1px 1px 4px 1px #999;
.iconfont{font-size: 0.2rem;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
}
.layout-main-menu{
	position: fixed;bottom: 70px;right: 10px;border-radius: 100%;width: 50px;height: 50px;overflow: visible;z-index: 11;background: #fff;
	a.menu-item{position: absolute;border-radius: 100%;width: 40px;height: 40px;overflow: hidden;line-height: 40px;text-align: center;font-size: 12px;transition:all 1s ease-in-out;opacity: 0;background: #fff;left:50%;top:50%;margin: -20px 0 0 -20px;}
  a.menu-item.active{background: #d9b56b;color: #fff;}
  a.menu-item:nth-child(1){transition:all 0.5s ease-in-out 0s;}
  a.menu-item:nth-child(2){transition:all 0.5s ease-in-out 0.1s;}
  a.menu-item:nth-child(3){transition:all 0.5s ease-in-out 0.2s;}
  a.menu-item:nth-child(4){transition:all 0.5s ease-in-out 0.3s;}
  a.menu-item:nth-child(5){transition:all 0.5s ease-in-out 0.4s;}
  .circle{width:60px;height:60px;left:50%;top:50%;position:absolute;border-radius: 100%;margin:-30px 0 0 -30px;transition:transform 1s ease-in-out;transform:rotate(-60deg)}
	&.active{
    .circle{transform:rotate(0deg)}
		a.menu-item:nth-child(1){opacity: 1;transform:translate(0,-60px)}
		a.menu-item:nth-child(2){opacity: 1;transform:translate(-42.42640687119285px, -42.42640687119285px)}
		a.menu-item:nth-child(3){opacity: 1;transform:translate(-60px,0)}
		a.menu-item:nth-child(4){opacity: 1;transform:translate(-42.42640687119285px, 42.42640687119285px)}
		a.menu-item:nth-child(5){opacity: 1;transform:translate(0, 60px)}
	}
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>